<!--  -->
<template>
   <div class="check-step">
        <ul class="clearfix">
            <li :class="num>=1?'cur':''">
                <span>Config</span>
                <i>address</i>
            </li>
            <li :class="num>=2?'cur':''">
                <span>Config</span>
                <i>Order</i>
            </li>
            <li :class="num>=3?'cur':''">
                <span>Config</span>
                <i>支付</i>
            </li>
            <li :class="num>=4?'cur':''">
                <span>Config</span>
                <i>address</i>
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
       components: {},
       props:{
           num:[String, Number],
       },
       data() {
           return {

           };
       },
       computed: {},
       watch: {},
       methods: {

       },
       created() {

       },
       mounted() {

       },
       beforeCreate() {}, //生命周期 - 创建之前
       beforeMount() {}, //生命周期 - 挂载之前
       beforeUpdate() {}, //生命周期 - 更新之前
       beforeDestroy() {}, //生命周期 - 销毁之前
       activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='less'>
     .check-step{
        width:85%;
        margin: 0 auto;
        ul{
            display: flex;
            li{
                span,i{
                    text-transform:capitalize;
                }
                &.cur{   
                    border-color: #d1434a;
                    color: #d1434a;
                    &:after{
                        color:#d1434a;
                        background-color:#d1434a;
                    }
                }
                flex:1;
                width: 25%;
                float: left;
                border-bottom: 2px solid #ccc;
                color:#ccc;
                text-align: center;
                line-height: 1.25em;
                padding: 0 1em 1.25em 0;
                position: relative;
                &:after{
                    content:"";
                    display:block;
                    position: absolute;
                    bottom: -8px;
                    left:50%;
                    width:15px;
                    height: 15px;
                    border-radius: 50%;
                    color:#ccc;
                    background-color: #ccc;
                    -webkit-transform: translate(-50%,0);
                    -moz-transform:translate(-50%,0);
                    transform: translate(-50%,0);
                }
                
            }
        }
    }
</style>